<template>
  <el-row :gutter="10"  type="flex" class="select-container">
    <!-- 选择省份-->
    <el-col :span="8">
      <Select :dataOfArr="provinceArr" :value="chooseId.provinceId" @changeSelect="handleChange('province',$event)" text="选择省份"></Select>
    </el-col>

    <!-- 选择城市 -->
    <el-col :span="8">
      <Select :dataOfArr="cityArr" :value="chooseId.cityId === 1 || chooseId.cityId === 24 ? '' : chooseId.cityId " :disabled="isMunicipality" @changeSelect="handleChange('city',$event)" text="选择城市"></Select>
    </el-col>
    <!-- 选择地区 -->
    <el-col :span="8">
      <Select :dataOfArr="areaArr" :value="chooseId.areaId"  @changeSelect="handleChange('area',$event)" text="选择地区"></Select>
    </el-col>
  </el-row>
</template>

<script>
import Select from './Select.vue';
import {setOptions} from '@/util/index.js';
import { mapGetters,mapState } from 'vuex'

export default {
  components: {
    Select
  },
  data() {
    return {
    }
  },
  computed : {
    ...mapGetters(['provinceArr','cityArr','areaArr','isMunicipality']),
    ...mapState(['chooseId'])
  },
  methods : {
    handleChange (name,e){
      this.$store.commit('setCityId', {[name + 'Id'] : e})

      // 当被选中的时候，重新渲染表单
      if(name === 'province') {
        this.$store.commit('setCityId', {cityId : '', areaId : ''});
      } else if (name === 'city'){
        this.$store.commit('setCityId', {areaId : ''});
      } else if (name === 'area'){
        setOptions({
          provinceId : this.$store.state.chooseId.provinceId,
          cityId: this.$store.state.chooseId.cityId,
          areaId : this.$store.state.chooseId.areaId,
        });
      }

      // 解决上海和北京无法被选择的情况
      if(name === 'province' && this.isMunicipality ) {
        this.$store.commit('setCityId', {cityId : e});
      }

      // 抛出事件
      if(this.$store.state.chooseId.areaId) {
        this.$emit('chooseDone');
      }
    },
  }
}
</script>

<style scoped lang="less">
.select-container {
  width: 100%;
  height: 100%;
  margin: 0!important;
  padding: 5px 10px;
  display: flex;
  align-items: center;

}


</style>